<template>
  <el-row>
    <el-col>
      <el-button type="success" @click="axiosGetHandler">get请求方法</el-button>
    </el-col>
    <el-col>
      <el-row>
        <el-col>
          <!-- ：data 绑定渲染的表格的数据  -->
          <el-table :data="tableData" stripe style="width: 100%">
            <!-- prop属性，对应表格数据中对象的key的名称， lable 是 表头每一列栏目的名称  width 固定列的宽度-->
            <el-table-column prop="adminName" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="adminPhone" label="手机号码" width="180">
            </el-table-column>
            <el-table-column prop="roleId" label="角色">
              <template #default="slotProps">
                {{ getRoleName(slotProps.row.roleId) }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scoped">
                <el-button @click="lookHandler(scoped.row)" type="info">查看</el-button>
                <el-button @click="editHandler(scoped.row)" type="warning">编辑</el-button>
                <el-button @click="deleteHandler(scoped.row, scoped.$index)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { queryPageUser, getRole } from "@/config/api"
export default {
  name: 'DEMOIndex',

  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      tableData: [], //用户数组
      roles: [], // 角色数组
    };
  },

  async created() {
    await this.getRoleHandler();  // 确保角色数据先回来
    await this.axiosGetHandler(); // 因为后面这个用户的数据在渲染表格时，需要使用角色的数据，
  },
  // async mounted() {
  //   await this.getRoleHandler();  // 确保角色数据先回来
  //   await this.axiosGetHandler(); // 因为后面这个用户的数据在渲染表格时，需要使用角色的数据，
  // },

  methods: {
    // 返回角色中文
    getRoleName(id) {
      let obj = this.roles.find(el => el.roleId === id)
      return obj.roleName
    },
    // 调用角色接口
    async getRoleHandler() {
      getRole().then(res => {
        console.log(res);
        if (res.data.code === 200) {
          this.roles = res.data.data;
        }
      })
    },
    // 调用用户接口
    async axiosGetHandler() {
      queryPageUser({ pageNum: this.pageNum, pageSize: this.pageSize })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.tableData = res.data.data.list;
          }
        })
        .catch(err => {
          console.log(err);
        })
    },
    lookHandler(row) {

    },
    editHandler(row) {

    },
    deleteHandler(row, index) {
      console.log(row);
      console.log(index);

    }
  },
};
</script>

<style lang="less" scoped></style>